<template>
    <div class="apply">
        <div class="apply_box">
            <div class="entry_form">
                    <div>报名表</div>
            </div>
            <div class="apply_basics">
                <div class="member title">
                    <div class="title1">基本信息</div>
                </div>
                <div class="box">
                    <form action="">
                        <div class="type">
                            <label for="">作品类型：</label>
                            <select v-model="options[selected]">
                                <option v-for="(option,i) of options" :value="option" :key="i">
                                    {{option}}
                                </option>
                            </select>
                        </div>
                        <div class="dName">
                            <label for="">团队名称：</label>
                            <input  name="dName" type="text" v-model="formData.dName">
                        </div>
                        <div lang="zName">
                            <label for="">作品名称：</label>
                            <input  name="zName" type="text" v-model="formData.zName">
                        </div>
                    </form>
                </div>
            </div>
            <div class="members">
                <div class="member title">
                    <div class="title1">团队成员</div>
                    <div class="title_add">
                        <el-button type="primary" @click="addMember">添加成员</el-button>
                        <el-button type="primary" @click="submitMember">保存</el-button>
                    </div>
                </div>
                <div class="box">
                    <el-card class="box-card" :key="'info'+index" v-for="(item,index) of members">
                        <template #header>
                            <div class="card-header " :class="'member'+index" @click="slide(index)">
                                <span  style="display: none">收缩</span>
                                <span  style="line-height: 0;padding-right: 5px;">
                                    <svg :class="'v'+index" viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" style="transform: rotate(0deg);">
                                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z">
                                        </path>
                                    </svg>
                                    </span>成员{{index+1}}
                            </div>
                        </template>
                        <form action="" :id="'member'+index" style="padding: 20px">
                            <div  class="text item">
                                <label for="">成员姓名：</label>
                                <input type="text" v-model="item.name">

                            </div>
                            <div  class="text item">
                                <label for="">学&nbsp;号：</label>
                                <input type="text"  v-model="item.sno">
                            </div>
                            <div  class="text item">
                                <label for="">班&nbsp;级：</label>
                                <input type="text"  v-model="item.class">
                            </div>
                            <div  class="text item">
                                <label for="">专&nbsp;业：</label>
                                <input type="text"  v-model="item.major">
                            </div>
                            <!--<el-button type="submit" >保存</el-button>-->
                            <el-button type="primary" @click="saveMember(index)">保存</el-button>
                            <template >
                                <el-popconfirm
                                        title="此操作将会永久删除该成员，是否继续？"
                                        @confirm="deleteMember(index)"
                                >
                                    <template #reference>
                                        <el-button style="margin-left: 10px;" type="danger">删除该成员</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </form>
                    </el-card>

                    <!--<form action="">-->
                        <!--<div></div>-->
                    <!--</form>-->
                </div>
            </div>
            <div class="synopsis">
                <div class="synopsi title">
                    <div class="title1">作品简介</div>
                    <div class="title_add">
                        <el-button type="primary" @click="submitSynopsis">保存</el-button>
                    </div>
                </div>
                <div id="box" class="box" style="text-align: left;z-index: 5">

                </div>
            </div>
            <div class="document">
                <div class="synopsi title">
                    <div class="title1">上传设计文档</div>
                    <div class="title_add">
                        <el-button type="primary" @click="submitDocument">保存</el-button>
                    </div>
                </div>
                <form action="">
                    <div class="box" style="">
                        <!--<el-upload-->
                                <!--class="upload-demo"-->
                                <!--action="https://jsonplaceholder.typicode.com/posts/"-->
                                <!--:on-preview="handlePreview"-->
                                <!--:on-remove="handleRemove"-->
                                <!--:before-remove="beforeRemove"-->
                                <!--:multiple=false-->
                                <!--:limit="1"-->
                                <!--:on-exceed="handleExceed"-->
                                <!--:file-list="fileList">-->
                        <div>
                            <label for="">
                                <input accept=".pdf"  id="document" @change="saveDocument2" type="file" style="display: none;">
                                <!--<span>呵呵呵呵</span>-->
                                <el-button size="small" type="primary" @click="saveDocument">点击上传</el-button>
                            </label>
                            <div slot="tip" class="el-upload__tip">只能上传pdf类型文件，且不超过2MB</div>
                            <div v-if="pdf.name!=''" class="el-upload-list__item is-success" tabindex="0"><!---->
                                <a class="el-upload-list__item-name">
                                    <i class="el-icon-document"></i>
                                    {{pdf.name}}&nbsp;{{pdf.size}}
                                </a>
                                <label class="el-upload-list__item-status-label">
                                    <i class="el-icon-upload-success el-icon-circle-check"></i>
                                </label>

                                <template >
                                    <el-popconfirm
                                            title="此操作将会永久删除该文件，是否继续？"
                                            @confirm="deleteDocument"
                                    >
                                        <template #reference>
                                            <i class="el-icon-close"></i>
                                            <i class="el-icon-close-tip">按 delete 键可删除</i>
                                        </template>
                                    </el-popconfirm>
                                </template>
                                <!----><!----></div>
                        </div>
                        <!--</el-upload>-->
                    </div>
                </form>
            </div>
            <div class="video">
                <div class="synopsi title">
                    <div class="title1">上传作品视频</div>
                    <div class="title_add">
                        <el-button type="primary">保存</el-button>
                    </div>
                </div>
                <form action="">
                    <div class="box">
                        <div>暂不需要上传</div>
                        <!--<el-upload-->
                                <!--class="upload-demo"-->
                                <!--action="https://jsonplaceholder.typicode.com/posts/"-->
                                <!--:on-preview="handlePreview"-->
                                <!--:on-remove="handleRemove"-->
                                <!--:before-remove="beforeRemove"-->
                                <!--multiple-->
                                <!--:limit="3"-->
                                <!--:on-exceed="handleExceed"-->
                                <!--:file-list="fileList">-->
                            <!--<el-button size="small" type="primary">点击上传</el-button>-->
                            <!--<div slot="tip" class="el-upload__tip">上传视频要求：大小不超过50MB，分辨率800*600。</div>-->
                        <!--</el-upload>-->
                    </div>
                </form>
            </div>
        </div>

    </div>
</template>

<script>
    import $ from 'jquery'
    import E from 'wangeditor'
    export default {
        name: "apply",
        data() {
            return {
                selected:'0',
                options:['移动应用开发','微信小程序'],
                fileList: [],
                formData:{type:'',dName:'2',zName:''},
                members:[],
                pdf:{fileId:'',name:'',size:''},
                file:'',
                video:'',
                application:this.$cloudbase.database().collection('application'),
                status:false,
                userId:localStorage.getItem('p_student_id'),
                editor:''
            };
        },
        async created(){
            $('html,body').scrollTop(0)
            this.formData.type = this.options[this.selected]
            let res = await this.application.doc(this.userId).get()
            if(res.data.length!=0) {
                this.status = Boolean(res.data.length)
                this.formData = res.data[0].formData
                this.members = res.data[0].members
                this.pdf = res.data[0].document

                this.editor = new E('#box')
                this.editor.config.placeholder = "请输入作品简介"
                this.editor.create()
                this.editor.txt.append(res.data[0].synopsis)
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            submitForm(){
                if(this.status){
                    this.application.doc(this.userId).update({
                        formData:this.formData
                    }).then(()=>{
                    })
                }else{
                    this.application.add({
                        _id:this.userId,
                        formData:this.formData,
                        members:[],
                        synopsis:'',
                        document:{fileId:'',name:'',size:''}
                }).then(()=>{
                        this.status=true
                    })
                }

                this.$message.success({
                    message:'保存成功',
                    center:true
                })
            },
            slide(index){
                if($('.member'+index).children()[0].innerText=='展开'){
                    $('.v'+index).css('transform','rotate(0deg)')
                    $('.member'+index).children()[0].innerText='收缩'
                    $('#member'+index).slideUp('fast','linear')
                }else{
                    $('.v'+index).css('transform','rotate(90deg)')
                    $('.member'+index).children()[0].innerText='展开'
                    $('#member'+index).slideDown('fast','linear')
                }
            },
            addMember(){
                console.log(this.members)
                console.log(this.members.length)
                if(this.members.length>=3){
                    this.$message.warning({
                        message:'团队成员最多三人！',
                        center:true
                    })
                    return;
                }
                let format = {name:'',sno:'',class:'',major:''}
                this.members.push(format)
            },
            // 删除单个成员
            deleteMember(index){
                    this.members.splice(index,1)
                    this.application.doc(this.userId).update({
                        members:this.members
                    })
                    this.$message.success({
                        message:'删除成功',
                        center:true
                    })

            },
            //保存单个成员
            saveMember(index){
                if (this.status){
                    this.application.doc(this.userId).update({
                        [`members.${index}`]:this.members[index]
                    }).then(()=>{
                        this.$message.success({
                            message:'保存成功',
                            center:true
                        })
                    })
                }else{
                    this.$message.warning({
                        message:'请先完善作品基本信息！',
                        center:true
                    })
                }
            },
            //保存所有成员
            submitMember(){
                if(this.members.length>=3){
                    this.$message.warning({
                        message:'团队成员最多三人！',
                        center:true
                    })
                    return 0;
                }
                if (this.status){
                  this.application.doc(this.userId).update({
                      members:this.members
                  }).then(()=>{
                      this.$message.success({
                          message:'保存成功',
                          center:true
                      })
                  })

                }else{
                        this.$message.warning({
                            message:'请先完善作品基本信息！',
                            center:true
                        })
                    }
            },
            //保存简介
            submitSynopsis(){
                // this.editor.txt.append('视动画《我的青春恋爱物语果然有问题。》改编自渡航著作的同名轻小说，动画一直制作到原作小说第6卷（文化祭Episode）为止 [1]  。作品在2012年7月9日宣布TV动画化决定， [2]  并于2013年4月4日首播，在本篇第12集播放后的第二周又播放了原创剧情的番外篇。此外，在2013年9月19日发售的游戏《我的青春恋爱物语在游戏里果然也有问题。》限定版，还同捆附带了原创剧情的OVA动画，番外篇和OVA皆由原作者渡航负责脚本 [3]  。')

                this.application.doc(this.userId).update({
                    synopsis:this.editor.txt.text()
                })
                if (this.status){
                    this.$message.success({
                        message:'保存成功',
                        center:true
                    })
                } else{
                    this.$message.warning({
                        message:'请先完善作品基本信息！',
                        center:true
                    })
                }
                // console.log(this.editor.txt.text())
            },
            saveDocument(){
                $('#document')[0].click()
            },
            //上传设计文档
            saveDocument2(e){
                this.file =e.srcElement.files[0]
                // console.log()
                // 名字、尺寸、类型
                if(this.file.type!='application/pdf'){
                    // alert('不能选择pdf以外的类型')
                    this.$message.warning({
                        message:'只能上传pdf格式的文件！',
                        center:true
                    })
                }else if(this.file.size>(2*1024*1024)){
                    this.$message.warning({
                        message:'只能上传pdf格式的文件！',
                        center:true
                    })
                }
                else{
                    this.pdf.name=this.file.name
                    this.pdf.size=(this.file.size/1024).toFixed(1) +'KB'
                }
            },
            //消除设计文档
            deleteDocument(){
                this.pdf.fileId=''
                this.pdf.name=''
                this.pdf.size=''
            },
            submitDocument() {
                // this.

                console.log(this.file)
                if (this.file==''){

                    this.$message.warning({
                        message: '请先上传文件',
                        center: true
                    })
                    return
                }
                if (this.status) {
                    if (this.pdf.fileId!=''){
                        this.$cloudbase.deleteFile({
                            fileList:[this.pdf.fileId]
                        })
                    }
                    this.$cloudbase.uploadFile({
                        cloudPath: "home/designDocument/" + this.pdf.name,
                        filePath: this.file
                    }).then(res => {
                        this.pdf.fileId=res.fileID
                        this.application.update({
                            document:this.pdf

                        }).then(() => {
                            this.$message.success({
                                message: '保存成功',
                                center: true
                            })
                        })
                    })
                }else{
                    this.$message.warning({
                        message:'请先完善作品基本信息！',
                        center:true
                    })
                }
            }

        },
        computed:{
        }
    }
</script>

<style scoped>
    @import "../../../css/component/apply.css";
</style>